<style> 
.cart_list_default .cart_order_btn .checkout{
	display: flex;
}
</style>
{% if cart.item_count != 0 %}
<div class="cart_list_default container_wrapper" id="cart_list">
	<h1 class="title">{{ lang.cart.list.your_cart }}</h1>
  <div class="plugin-container-header"></div>
  <div class="cart_form-header">
		<a class="links" href="/">< {{ lang.cart.list.continue_shopping }}</a>
		<div class="cart_list_delete_all" style="cursor: pointer;" href="javascript:void(0);">{% include icon_delete ,{width:'20',height:'20'} %}</div>
	</div>
	<form class="cart_form" action="/cart" method="post" novalidate="">
		<div class="cart_product_list">
			<div class="cart_list_title">
				<div class="cart_list_title_items">{{ lang.cart.list.product }}</div>
				<div class="cart_list_title_items"></div>
				<div class="cart_list_title_items">{{ lang.cart.list.quantity }}</div>
				<div class="cart_list_title_items">{{ lang.cart.list.total }}</div>
				<div class="cart_list_title_items"></div>
			</div>
			<div class="cart_product_list——content">
				{% for list in cart.items %}
				<div class="cart_list_content">
				  	
					<div class="cart_list_content_items">
						<div class="product_info">
							<div class="product_info_pic">
								<a href="{{ list.url }}?data_from={{data_from}}" style="position: relative;">
									{%- if list.product.image.alt == "" -%}
										{% assign product_alt = list.product | image_alt:'product'  %}
									{%- else -%}
											{% assign product_alt = list.product.image.alt %}
									{%- endif -%}
									<img data-src="{{ list.image }}" alt="{{product_alt}}" src="{{ 'empty_loading.png' | public_asset_abs_url }}">
				  							{% if list.log_src %}
													<img src="{{list.log_src}}" style="position: absolute;bottom: 0;right: 0;background-color: #e8e8e8;width: 16px;height: 16px;border-radius: 50%;">
												{% endif %}
								</a>
							</div>
							
						</div>
					</div>
					<div class="cart_list_content_items" style="overflow: hidden;">
						<div class="product_info_info" >
							<a class="product_info_name" href="{{ list.url }}?data_from={{data_from}}">{{ list.product.title }}</a>
							{% include 'product_sku_spu_show', className:"product_info_sku",style:"",spu:list.product.spu,sku:list.sku %}
							{% unless list.product.has_only_default_variant %}
							{% for option in list.options_with_values %}
							<div class="product_info_sku">
								{{ option.name }}:&nbsp;{{ option.value }}
							</div>
							{% endfor %}
							{% endunless %}

							{% include 'product_custom_option', customOption:list.property,isShowTiem:true %}

						</div>
					</div>
					<div class="cart_list_content_items">
						<div class="cart_qty_content">

							{%- if list.unmodifiable == 1 or list.unavailable == 1 -%}
								<div class="stock_quantity"><span style='color:#333'>x{{ list.quantity }}</span>{%- if list.unavailable == 1 -%}<br />{{ lang.checkout.unavailable }}{%- endif -%} </div>
								<div class="wap_stock_quantity"><span style='color:#333'>x{{list.quantity}}</span><br />{%- if list.unavailable == 1 -%}{{ lang.checkout.unavailable }}{%- endif -%}</div>
							{%- else -%}
							<div  class="cart_qty {% if list.unmodifiable == 1 or list.unavailable == 1 %}minicart_qty-disable{% endif %}" inventory_policy="{{ list.product.inventory_policy }}" inventory_tracking="{{ list.product.inventory_tracking }}" inventory_quantity="{{ list.variant.inventory_quantity }}">
								<a class="cart_qty_minus" href="javascript:void(0);">{% include icon_minus ,{width:'16',height:'16'} %}</a>
								<input class="cart_qty_txt" type="text" name="cart_qty" value="{{ list.quantity }}">
								<a class="cart_qty_plus" href="javascript:void(0);">{% include icon_plus ,{width:'16',height:'16'} %}</a>
							</div>
							{%- endif -%}


							{% if list.limit_quantity %}
							<div class="tip">{{ lang.general.stock }}: {{ list.variant.inventory_quantity }}</div>
							{% endif %}
						</div>
					</div>
					<div class="cart_list_content_items product_total">
						   <span  class="final_line_price" >
              {{ list.final_line_price | money:cart.currency }}
            </span>
							{% if list.data_from == "app_limitedtimeoffer" and list.original_line_compare_at_price > 0 %}
								<span class="original_line_price" style="color:#888;text-decoration: line-through;">
									{{ list.original_line_compare_at_price | money:cart.currency }}
								</span>
							{% else %}
								<span class="original_line_price {% if list.original_line_price > list.final_line_price %}show{% else %}hide{% endif %}" style="color:#888;text-decoration: line-through;">
									{{ list.original_line_price | money:cart.currency }}
								</span>
							{% endif %}

             
            	
         
					</div>
					<div class="cart_list_content_items">
						<a class="cart_list_delete" href="javascript:void(0);">{% include "icon_close" ,{width:'20',height:'20'} %}</a>
					</div>
				</div>
				{% endfor %}
			</div>
		</div>
		<div id="overstep_prompt"></div>
		<div class="cart_order_summary">
		  <div class="plugin-cart-buy_right" style="flex:1"></div>

			<div class="cart_order_summary_wrapper">
		
				<div class="cart_order_price">
						
					{% if storeConfig.coupon_use_range  == "cart" %}
						<div class="order_discount" data-type='cart'>
							<div class="order_discount_form">
									<div class="order_text_box">
											<label class="text_label" for="use_coupon_code">{{ lang.checkout.coupon_code }}</label>
											<input class="order_discount_code order_text coupon_code_input" onkeydown="if(event.keyCode==13){}" type="text" name="coupon_code" value="" placeholder="" autocomplete="off" id="use_coupon_code">
									</div>
									<input class="order_discount_code_btn valide_coupon_btn" type="button" name="discount_code_btn" value="{{ lang.checkout.apply }}">
							</div>
							{% if cart.coupon_code %}
                    <div class="order_discount_coupon_code">{% system_include icon_order_coupon ,{width:'18',height:'18'} %} {{ cart.coupon_code }}<span class="close_coupon_code">{% system_include icon_close ,{width:'16',height:'16'} %}</span></div>
              {% endif %}
						</div>
					{% endif %}
				
					<ul>
						{% unless cart.total_discount == 0 %}
						<li>
							<span>{{ lang.cart.list.discount }}</span>
							<span id="cart_discount">{{ cart.total_discount | money }}</span>
						</li>
						{% endunless %}
					
						<li id="subtotal">
							<span>{{ lang.cart.list.subtotal }}</span>
							<span id="cart_subtotal">{{ cart.items_subtotal_price | money }}</span>
						</li>
						{% if cart.promotion_price %}
						<li id="promotion_price_box">
							<span>{{ lang.checkout.promotion_discount }}</span>
							<span id="promotion_price">{{ cart.promotion_price | money }}</span>
						</li>
						{% endif %}
						 {% if cart.coupon_price != 0 %}
                            <li>
                                <div class="name">{{ lang.checkout.coupon_discount }}</div>
                                <div class="value" id="coupon_discount">{{ cart.coupon_price | money }}</div>
                            </li>
            {% endif %}
						<li>
							<span>{{ lang.cart.list.taxes_and_shipping }}</span>
							<span>{{lang.cart.list.calculated_at_checkout }}</span>
						</li>
						<li>
							<span>{{ lang.cart.list.total }}</span>
							<span id="cart_total_price">{{ cart.total_price | money }}</span>
						</li>
					</ul>
					<div class="cart_order_remark"></div>
				</div>
			  <div class="plugin-cart-buy_top"></div>
				<div class="cart_order_btn">
					{% if cart.has_out_of_stock %}
					<a class="checkout main_btn checkout_out_of_stock" href="javascript:void(0);">{{lang.cart.list.checkout }}</a>
					{% else %}
					<a class="checkout main_btn" id="checkout" href="javascript:void(0);">{{ lang.cart.list.checkout}}</a>
					{% endif %}
				</div>
				
                {% if payment_form_html %}
                <div class="shopcart-or" {% if cart.has_out_of_stock %}style="display:none;"{% endif %}><span>{{ lang.cart.list.or }}</span></div>   
                <div class="shopcart-payment" {% if cart.has_out_of_stock %}style="display:none;"{% endif %}>{{ payment_form_html }}</div>
                {% endif %}
                
				<div class="cart_order_link"><a class="links" href="/">< {{ lang.cart.list.continue_shopping }}</a></div>
			  <div class="plugin-cart-buy_bottom"></div>
			</div>
		</div>
	</form>
	<div class="plugin-container-footer" ></div>

</div>
<script type="text/javascript">
  window.addEventListener('DOMContentLoaded', function () {
		{% comment %} 本地缓存优惠券渲染 {% endcomment %}
		window['oemcartCouponRecord'] && window['oemcartCouponRecord']('',oemcart_cart.coupon_code)
	})
	$(function(){
		

		const cart = oemcart_cart;
		moi.setPageStorage('cart_total', oemcart_cart);

		function getCartChange(data,line,callback){
			moi.ajax({
				url:'/cart/change',
				type: 'POST',
				contentType: "application/json",
				data:JSON.stringify(data),
        dataType: 'json',
				success: function(res){
					callback && callback(res.data)
					moi.setPageStorage('cart_total', res.data);
					moi.onEvent("cartChange",res.data);
					moi.onEvent("cartPriceChange", {
            total_price:formatMoney(res.data.total_price,oemcart_currency,'',false,false)
					})
					if(typeof(res.data.items[(line - 1)]) == 'undefined' || cart.coupon_code != res.data.coupon_code)
					{
							window.location.reload();
							return
					}
					var price1 = res.data.items[(line - 1)].final_line_price;
					var originalPrice = res.data.items[(line - 1)].original_line_price;
					var compare_at_price = res.data.items[(line - 1)].original_line_compare_at_price;
					var price2 = res.data.total_discount;
					var price3 = res.data.items_subtotal_price;
					var price4 = res.data.total_price;
					var promotion = res.data.promotion_price;


					$(".cart_list_content").eq(line-1).find('.final_line_price').html(formatMoney(price1, oemcart_currency));
					if(originalPrice > price1){
						$(".cart_list_content").eq(line-1).find('.original_line_price').show();
						if(res.data.items[(line - 1)].data_from == "app_limitedtimeoffer" && res.data.items[(line - 1)].variant.compare_at_price > 0){
							$(".cart_list_content").eq(line-1).find('.original_line_price').html(formatMoney(compare_at_price, oemcart_currency));
						}else{
							$(".cart_list_content").eq(line-1).find('.original_line_price').html(formatMoney(originalPrice, oemcart_currency));
						}
					}else{
						$(".cart_list_content").eq(line-1).find('.original_line_price').hide();
					}
					$('#cart_discount').html(formatMoney(price2, oemcart_currency));
					$('#cart_subtotal').html(formatMoney(price3, oemcart_currency));
					$('#cart_total_price').html(formatMoney(price4, oemcart_currency));
					$('#coupon_discount').html(formatMoney(res.data.coupon_price, oemcart_currency));

					addCartNum();
					miniCart();
					if(promotion == 0 && $('#promotion_price_box').length != 0){
						$('#promotion_price_box').remove();
					}else if(promotion != 0){
						if($('#promotion_price_box').length == 0){
							$('#subtotal').after('<li id="promotion_price_box"><span>{{ lang.checkout.promotion_discount }}</span><span id="promotion_price">'+ formatMoney(promotion, oemcart_currency) +'</span></li>');
						}else{
							$('#promotion_price').html(formatMoney(promotion, oemcart_currency));
						}
						
					}
					res.data.items.forEach(function(product,index){
							if(product.unmodifiable == 1 || product.unavailable == 1){
									var pcunavailableHtml = '';
									var wapunavailableHtml = '';
									if(product.unavailable == 1){
										pcunavailableHtml = "<br />"+lang.checkout.unavailable+"";
										wapunavailableHtml = lang.checkout.unavailable;
									}

								

									$(".cart_list_content").eq(index).find('.cart_qty_content').html(`<div class="stock_quantity"><span  style='color:#333'>x${product.quantity}</span>${pcunavailableHtml}</div><div class="wap_stock_quantity"><span style='color:#333'>x${product.quantity}</span><br />${wapunavailableHtml}</div>`);	
							}

							if(product.limit_quantity == 1){
										var limitHtml = "<div class='tip'>"+lang.general.stock+":"+product.variant.inventory_quantity+"</div>";
										if($(".cart_list_content").eq(index).find('.tip').length){
											$(".cart_list_content").eq(index).find('.tip').html(limitHtml)
										}else{
										$(".cart_list_content").eq(index).find('.cart_qty_content').append(limitHtml)
										}
							}else{
									$(".cart_list_content").eq(index).find('.tip').remove()
							}
						})
					if(res.data.has_out_of_stock){
						$('.checkout').removeAttr('id');
						$('.checkout').addClass('checkout_out_of_stock');
						$('.shopcart-payment').hide();
						$('.shopcart-or').hide();
					}else{
						$('.checkout').attr('id','checkout');
						$('.checkout').removeClass('checkout_out_of_stock');
						$('.shopcart-payment').show();
						$('.shopcart-or').show();
					}
				},
				beforeSend: function(){
		           createAjaxLoading();
		    },
		    complete: function(){
		            removeAjaxLoading();
		    }
			})
		}


		{%- comment -%} 执行是否有倒计时 {%- endcomment -%}
		var cartNodeList = $(".cart_product_list——content .cart_list_content");
		var productList = cart.items;
		for(let i=0;i<productList.length;i++){

				{%- comment -%} 获取自定义属性是否存在倒计时 {%- endcomment -%}
				const cuurentTimer = productList[i].property.find(function(item){
					return item.type == "promotion_timer"
				})

				if(cuurentTimer){
					var timing = productList[i].ends_at - cart.sys_time;
					if(timing > 0){
						moi.countdown(cartNodeList.eq(i).find(".cart-label-timer"),timing,function(){
								{%- comment -%} getCartChange({'line':i,'quantity':productList[i].quantity},i) {%- endcomment -%}
								window.location.reload();
						})
						cartNodeList.eq(i).find(".cart-label-timer").show();
					}

				}

		}

		


		var minus = $('.cart_qty_minus');
		var plus = $('.cart_qty_plus');
		var qtyText = $('.cart_qty_txt');
		minus.click(function(){
			var _this = $(this);
			var _index = _this.parents('.cart_list_content').index();
			var line = parseInt(_index) + 1;
			var qtyVal = _this.siblings('.cart_qty_txt').attr('value');
			var inventory_policy = _this.parent().attr('inventory_policy');
			var inventory_tracking = _this.parent().attr('inventory_tracking');
			var inventory_quantity = _this.parent().attr('inventory_quantity');
			var newQtyVal;

			if(qtyVal >= 2 && qtyVal <= 999999){
				newQtyVal = parseInt(qtyVal) - 1;
				_this.siblings('.cart_qty_txt').attr('value',newQtyVal);

			}else if(parseInt(qtyVal) > 999999){
				newQtyVal = 999999;
				_this.siblings('.cart_qty_txt').attr('value','999999');
			}else{
				return false;
			}

	
			
			if(qtyVal > 1){
				moi.onEvent("cartMinus", productList[_index]);
				getCartChange({'line':line,'quantity':newQtyVal},line)
			}
		})
		plus.click(function(){
			
			var _this = $(this);
			var _index = _this.parents('.cart_list_content').index();
			var line = parseInt(_index) + 1;
			var qtyVal = _this.siblings('.cart_qty_txt').attr('value');
			var inventory_policy = _this.parent().attr('inventory_policy');
			var inventory_tracking = _this.parent().attr('inventory_tracking');
			var inventory_quantity = _this.parent().attr('inventory_quantity');
			var newQtyVal;
			if(qtyVal >= 0 && qtyVal <= 999999){
				newQtyVal = parseInt(qtyVal) + 1;
				_this.siblings('.cart_qty_txt').attr('value',newQtyVal);
			}else if(parseInt(qtyVal) > 999999){
				newQtyVal = 999999;
			}
			moi.onEvent("cartPlus", productList[_index]);
			getCartChange({'line':line,'quantity':newQtyVal},line)
		})
		qtyText.keyup(function(){
			$(this)[0].value = $(this)[0].value.replace(/^(0+)|[^\d]+/g,'');
			if($(this)[0].value > 999999){
				$(this)[0].value = 999999;
			}
		})
		qtyText.blur(function(){
			if($(this).attr('value') == ""){
				$(this).attr('value','1');
			}
		})
		qtyText.change(function(){
			
			var _this = $(this);
			var _index = _this.parents('.cart_list_content').index();
			var line = parseInt(_index) + 1;
			var qtyVal = _this.attr('value');
			if(qtyVal == ''){
				qtyVal = 1;
			}
			var inventory_policy = _this.parent().attr('inventory_policy');
			var inventory_tracking = _this.parent().attr('inventory_tracking');
			var inventory_quantity = _this.parent().attr('inventory_quantity');

			var newQtyVal;
			if(parseInt(qtyVal) >= 0 && qtyVal <= 999999){
				newQtyVal = parseInt(qtyVal);
				_this.siblings('.cart_qty_txt').attr('value',newQtyVal);
			}else if(parseInt(qtyVal) > 999999){
				newQtyVal = 999999;
			}
			if(inventory_tracking == '1'){
				if(parseInt(newQtyVal) > parseInt(inventory_quantity)){
					qtyVal = inventory_quantity;
					if(_this.parent().siblings('.tip').length == 0){
						_this.parent().after('<div class="tip">{{ lang.general.stock }}: '+ inventory_quantity +'</div>');
					}
				}else{
					_this.parent().siblings('.tip').remove();
				}
			}
			getCartChange({'line':line,'quantity':newQtyVal},line)
		})


		$('.cart_list_delete').click(function(){
			var _this = $(this);
			var _index = _this.parents('.cart_list_content').index();
			var line = parseInt(_index) + 1;
			getCartChange({'line':line,'quantity':0},line,function(data){
					
					_this.parents('.cart_list_content').remove();
					var item = cart.items[_index];
					var product = item.product;
					var variant = item.variant || product.variant;
					if (window.callback_add_to_cart) {
						var ec_data = {
							'ec_data_id': product['id'],
							'ec_data_from': '{{ data_from }}',
							'ec_data_quantity': item.quantity,
							'ec_data_name':  encodeURIComponent(product['title']),
							'ec_data_price': variant['price'],
							'ec_data_discount_price': variant['price'],
							'ec_data_spu': product['spu'],
							'ec_data_image': product['src'],
							'ec_data_category': product['product_type'],
							'ec_data_uniq_id': product['id'],
							'ec_data_sku': variant['sku'],
							'ec_data_sku_code': variant['sku_code'],
							'ec_data_sku_name': variant['sku_value'],
							'ec_currency_code': '{{ base_currency.standard_code }}',
							'ec_data_action_type': 'remove_from_cart'
						};
						callback_remove_from_cart(ec_data)
					}
			})

		})

			$('.cart_list_delete_all').click(function () {
				moi.confirm({
					title: '{{lang.checkout.clear_cart}}',
					ok: function () {
						moi.ajax({
							url: '/cart/clean',
							type: 'POST',
							contentType: "application/json",
							dataType: 'json',
							success: function (res) {
								window.location.reload();
							},
							beforeSend: function () {
								createAjaxLoading()
							},
							complete: function () {
								removeAjaxLoading()
							}
						})
					}
				})

			})
		$('.cart_form').submit(function(){
            var is_submit = true;
            return is_submit;
     });
		$(document).on('click','#checkout',function(){
			$('.cart_form').submit();
		})

		$('.order_text_box .order_text').each(function () {
            if ($(this).attr('value') != '') {
                $(this).parents('.order_text_box').addClass('order_text_on');
            }
        });
        $('.order_text_box .order_text').focus(function () {
            $(this).parents('.order_text_box').addClass('order_text_on');
        });
				
        $(document).on('keydown', '.order_text_box .order_text', function () {

            $(this).parents('.order_text_box').addClass('order_text_on');
            $(this).removeClass('top-border');
            $(this).siblings('.tip').remove();
        });
        $(document).on('blur', '.order_text_box .order_text', function () {

            if ($(this).attr('value') == '') {
                $(this).parents('.order_text_box').removeClass('order_text_on');
            }
        })

		function discount() {
        $('#use_coupon_code').blur(function () {
            if ($(this).attr('value') == '') {
                $('.order_discount_code_btn').removeClass("order_discount_code_btn_on");
            }else{
                $('.order_discount_code_btn').addClass("order_discount_code_btn_on");

						}
        });
        $('#use_coupon_code').keydown(function () {
            $('.order_discount_code_btn').addClass("order_discount_code_btn_on");
        });
        $('.valide_coupon_btn').click(function () {
            if ($.trim($('.coupon_code_input').val()) == '') {
                return;
            }
            var codeobj = $('.coupon_code_input').val();
            var _this = $(this);
						//+codeobj
            moi.ajax({
                url: "/coupon/use/",
                type: 'GET',
                dataType: 'json',
                data: {
                    code: codeobj
                },
                cache: false,
                success: function (res) {
                    if (res.data.code != 0) {
                        $('input[name="coupon_code"]').addClass('top-border');
                        $(".coupons-record-item").removeClass("coupons-record-item-active");

                        if (!$('input[name="coupon_code"]').siblings('.tip').length) {
                            $('input[name="coupon_code"]').after('<p class="tip">' + res.data.msg + '</p>');
                        } else {
                            $('.tip').html(res.data.msg);
                        }

                        return;
                    }
                    else {
                        window.location.reload();
                    }
                },
                beforeSend: function () {
                    createAjaxLoading();
                },
                complete: function () {
                    removeAjaxLoading();
                }
            });
        });
        $('.close_coupon_code').click(function () {
            moi.ajax({
                url: "/coupon/cancel",
                type: 'DELETE',
                dataType: 'json',
                cache: false,
                success: function (res) {
                    if (res.code == '0') {
                        window.location.reload();
                    }
                },
                beforeSend: function () {
                    createAjaxLoading();
                },
                complete: function () {
                    removeAjaxLoading();
                }
            });
        })
    }

		if(oemcart_cart.coupon_use){
			moi.alertInfo({content:"{{lang.coupons.coupon_use}}",placement:"top",type:"success"})
			var result = oemcart_cart.coupon_use.result;
			if(result.code == -1){
				$('.coupon_code_input').parents('.order_text_box').addClass('order_text_on');

				$('.coupon_code_input').val(oemcart_cart.coupon_use.coupon_code)
				$('input[name="coupon_code"]').addClass('top-border');
				if (!$('input[name="coupon_code"]').siblings('.tip').length) {
						$('input[name="coupon_code"]').after('<p class="tip">' + result.msg + '</p>');
				} else {
						$('.tip').html(result.msg);
				}
			}
		}
		discount()
		
	})



	
</script>
{% else %}
  <div class="plugin-container-header"></div>
<div class="cart_empty_default" id="cart_empty">
	<div class="cart_empty_wrapper">
		
		<div class="cart_empty_content">
			<h3 class="title">{{ lang.cart.list.shopping_cart }}</h3>
			<div class="cart_empty_svg">{% include icon_cart ,{width:'100',height:'100'} %}</div>
			<p>{{ lang.cart.list.your_shopping_cart_is_empty }}</p>
		</div>
		<a class="continue_shopping_btn" href="/">{{ lang.cart.list.continue_shopping }}</a>
		
	</div>

</div>
	<div class="plugin-container-footer"></div>

{% endif %}
{% include 'page_back_button' %}
